<template>
  <div id="intro">
    
      <div>
        <span>综合排序↑</span>
        <span class="intro_price" @click="sortByprice">价格</span>
        <span class="intro_num" @click="sortBynum">销量</span>
        <el-select class="intro_sel" size="mini" v-model="pvalue" @change="change" placeholder="价格区间"
          >
          <el-option
            v-for="item in prices"
            :key="item.pvalue"
            :label="item.plabel"
            :value="item.pvalue">
          </el-option>
        </el-select>
        <el-select class="intro_sel" size="mini" v-model="dvalue" placeholder="出游天数" @change="change">
          <el-option
            v-for="item in playDays"
            :key="item.dvalue"
            :label="item.dlabel"
            :value="item.dvalue">
          </el-option>
        </el-select>
        <el-select class="intro_sel" size="mini" v-model="cvalue" placeholder="出游热门城市" @change="change">
          <el-option
            v-for="item in city"
            :key="item.cvalue"
            :label="item.clabel"
            :value="item.cvalue">
          </el-option>
        </el-select>
      </div>
      <div class="intro_detail">
        <router-link :to="`/detail/${item.id}/${item.date}`" class="intro_item" v-for="item of intro" :key="item.id">
          <div class="intro_img">
            <img :src="item.image" alt="">
          </div>
          <div class="intro_text">
            <div>
              <h2>{{item.title}}</h2>
              <span class="city">{{item.place}}</span>
              <span>{{item.description}}</span>
            </div>
            <div class="data">团期：{{item.date}}</div>
            <div class="day">行程：{{item.jour}}天</div>
          </div>
          <div claas="intro_footer">
            <div class="intro_footer_price">
              <span>￥</span>
              <span>{{item.price}}</span>
              <span>起</span>
            </div>
            <div class="intro_comment">
              <div>
                <div class="intro_sa">100%</div>
                <div>满意度</div>
              </div>
              <div>
                <div>{{item.buy}}人已购买</div>
                <div>0条评论</div>
              </div>
            </div>
          </div>
        </router-link>
      </div>
      <div @click="pg">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
          class="pg"
          >
        </el-pagination>
      </div>
      <div>
      </div>
  </div>
</template>
<style>
* {
  margin: 0;
  padding: 0;
}
#intro {
  width: 1000px;
  margin: 0 auto;

  margin-top: 30px;
  padding: 0 5px;

  text-align: center;
}
.intro_price,.intro_num{
  cursor: pointer;
}
#intro > div:first-child {
  background-color: #f9f8f8;
  height: 50px;
  line-height: 50px;
}
#intro > div > span {
  display: inline-block;
  width: 80px;
  font-size: 15px;
  font-weight: 500;
}
.intro_sel {
  width: 200px;
  padding: 0 10px;
}
.intro_sel input::-webkit-input-placeholder {
  font-size: 15px;
  color: #999;
}
#intro .intro_sel .el-input__inner {
  height: 30px;
  line-height: 30px;
}

.intro_item {
  margin: 10px 0;
  border: 1px solid #ccc;
  padding: 15px;
  display: flex;
  color: #333;
}

.intro_img > image {
  width: 100%;
}
.intro_text {
  text-align: left;
  margin-left: 20px;
  font-size: 12px;
  width: 450px;
}
#intro .intro_text :nth-child(2) {
  height: 30px;
}
.intro_text h2 {
  margin-top: -8px;
  height: 40px;
  line-height: 30px;
  font-size: 16px;
  white-space: nowrap; 
  overflow: hidden;

  text-overflow: ellipsis;
}
#intro .intro_text span {
  height: 20px;
  line-height: 30px;
  display: inline-block;
}
#intro .intro_text .city {
  padding: 0 11px;
  background: url(../assets/house/pos_ico.png) no-repeat left center;
  color: #50b400;
}
#intro .data,
#intro .day {
  height: 30px;
  line-height: 30px;
}
.intro_footer_price {
  color: #ff6633;
  font-size: 16px;
  margin: 10px 20px;
}
.intro_footer_price > span:nth-child(2) {
  font-size: 28px;
}
.intro_footer_price > span:last-child {
  font-size: 12px;
}
.intro_comment {
  display: flex;
  font-size: 12px;
  background: #f5f9fd;
  margin: 5px;
  padding: 5px;
  width: 150px;
  color: #666;
  border-radius: 3px;
}
.intro_comment > div {
  height: 45px;
  line-height: 20px;
  padding: 5px;
}
.intro_comment > div:first-child {
  border-right: 1px solid #ccc;
}
.intro_sa {
  color: #f63;
  font-size: 16px;
}
.pg {
  margin: 20px;
}
</style>

<script>
export default {
  props: ["select","keyword"],
  data() {
    return {
      a: [],
      pvalue: "",
      dvalue: "",
      cvalue: "",
      intro: [],
      backups:[],
      cid: 1,
      prices: [
        {
          pvalue: "选项1",
          plabel: "￥200以下"
        },
        {
          pvalue: "选项2",
          plabel: "￥201-￥500"
        },
        {
          pvalue: "选项3",
          plabel: "￥501-￥2000"
        },
        {
          pvalue: "选项4",
          plabel: "￥2001-￥5500"
        },
        {
          pvalue: "选项5",
          plabel: "￥5501-￥10000"
        },
        {
          pvalue: "选项6",
          plabel: "￥10001-￥20000"
        },
      ],

      playDays: [
        {
          dvalue: "选项1",
          dlabel: "一日游"
        },
        {
          dvalue: "选项2",
          dlabel: "两日游"
        },
        {
          dvalue: "选项3",
          dlabel: "三日游以上"
        }
      ],

      city: [
        {
          cvalue: "选项1",
          clabel: "不限"
        },
        {
          cvalue: "选项2",
          clabel: "恩施"
        },
        {
          cvalue: "选项3",
          clabel: "钦州"
        },
        {
          cvalue: "选项4",
          clabel: "潜江"
        },
        {
          cvalue: "选项5",
          clabel: "乌海"
        },
        {
          cvalue: "选项6",
          clabel: "信阳"
        },
        {
          cvalue: "选项7",
          clabel: "东莞"
        },
        {
          cvalue: "选项8",
          clabel: "秦皇岛"
        },
      ]
    };
  },
  mounted() {
    this.axios
    .get("travel", {
      params: {
        cid: this.cid,
        page: 1
      }
    })
    .then(result => {
      this.intro = result.data.results;
      this.backups=this.intro.slice();
      // console.log(this.intro);
      this.intro.forEach(item => {
        item.image = require("../assets/house/" + item.image);
      });
        if(this.keyword!="''"){
          this.search(this.keyword);
        }
    });
  },
  watch: {
    select() {
      this.searchCity();
      this.a = this.select.slice();
    },
    keyword(){
      this.search(this.keyword);     
    },
    // pvalue() {
    //   console.log(this.value);
    // },
    // dvalue() {
    //   console.log(this.value);
    // },
    cid() {
      this.axios
        .get("travel", {
          params: {
            cid: this.cid,
            page: 1
          }
        })
        .then(result => {
          this.intro = result.data.results;
          // console.log(this.intro);
          this.intro.forEach(item => {
            item.image = require("../assets/house/" + item.image);
          });
        });
    }
  },
  methods: {
    pg(e) {
      // console.log(e.target);
      let lis = document.getElementsByClassName("number");
      for (var k = 0; k < lis.length; k++) {
        // console.log(lis[k])

        if (e.target == lis[k]) {
          this.cid = e.target.innerHTML;
          console.log(this.cid);
        }
      }
    },
    sortByprice(){
      this.intro.sort((a,b)=>parseInt(a.price)-parseInt(b.price))
    },
    sortBynum(){
      this.intro.sort((a,b)=>parseInt(a.buy)-parseInt(b.buy))
    },
    change(){
      this.intro=this.backups;
      if(this.pvalue){  
        for(var item of this.prices){
          if(item.pvalue==this.pvalue){
            var str=item.plabel;
          }
        }
        let list=this.intro.filter(elem=>{
          let arr=str.split('-');
          if(arr.length==1){
            let str1=arr[0].split('以')[0]
            return parseInt(elem.price)<parseInt(str1.slice(1)) 
          }else{
            let min=parseInt(arr[0].slice(1)); 
            let max=parseInt(arr[1].slice(1));
            return parseInt(elem.price)>min && parseInt(elem.price)<max
          }   
        });
        this.intro=list; 
      }
      if(this.dvalue){
        for(var item of this.playDays){
          if(item.dvalue==this.dvalue){
            var str=item.dlabel;
          }
        }
        let list=this.intro.filter(elem=>{
          let str1=str.slice(0,1);
          if(str1=="一"){
            return parseInt(elem.jour)==1 
          }else if(str1=="两"){
            return parseInt(elem.jour)==2 
          }else if(str1=="三"){
            return parseInt(elem.jour)>3 
          }  
        })
        this.intro=list;
      }
      if(this.cvalue){
        for(var item of this.city){
          if(item.cvalue==this.cvalue){
            var str=item.clabel;
          str!="不限"&&this.search(str);
          }
        }
      }
    },
    searchCity(){
        let res='';
        this.select.forEach(elem=>{
          res+=elem;
        })
        res&&this.search(res);
    },
    search(argument){
      this.axios.get(`/search?kw=${argument}`).then(result=>{
          // console.log(result.data);
          this.intro=result.data.results;
          this.intro.forEach(elem=>{
            elem.image = require(`../assets/house/${elem.image}`);
          })
      })
    }
  }
};
</script>
